<template>
    <div class="search-list">
        <div class="headers">
            <Header></Header>
            <ul>
                <li 
                v-for="(item,index) in searchList.data"
                :key="index"
                @click="changTab(index)"
                >
                    <div :class='searchList.currentIndex == index?"active":""'>{{item.name}}</div>
                    <div class="search-fliter" v-if="index != 0">
                            <i class="iconfont icon-shangjiantou"
                            :class='item.status == 1?"active":""'
                            ></i>
                            <i class="iconfont icon-xiajiantou"
                            :class='item.status == 2?"active":""'
                            ></i>
                    </div>
                </li>
            </ul>
        </div>
        <section>
            <ul v-if="goodList.length">
                <li
                 v-for="(item,index) in goodList"
                 :key="index"
                >
                    <img v-lazy="item.imgUrl" alt="">
                    <h3>{{item.name}}</h3>
                    <div class="price">
                        <div>
                            <span>￥</span>
                            <b>{{item.price}}</b>
                        </div>
                        <div>立即购买</div>
                    </div>
                </li>
                
            </ul>
            <h1 v-else>暂无数据...</h1>
        </section>
        <Tabbar></Tabbar>
    </div>
</template>
<script>
import  Header  from '@/components/search/Header.vue';
import  Tabbar from '@/components/common/Tabbar.vue';
import http from '@/common/api/request.js';

export default({
    data() {
        return{
            goodList:[],
            searchList:{
                currentIndex:0,
                data:[
                    // 如果status为0，都不亮
                    // status  1 上箭头亮
                    // status  2 下箭头亮
                    {name:'综合',key:'zh'},
                    {name:'价格',status:0,key:'price'},
                    {name:'销量',status:0,key:'num'},
                ]
            },
        }
    },
    components:{
        Header,
        Tabbar
    },
    created(){
        this.getData();
    },
    computed:{
        orderBy(){
            //知道当前是哪一个对象 
            let obj = this.searchList.data[this.searchList.currentIndex];
            //针对状态判断是升序还是降序 asc升序 desc降序
            let val = obj.status == '1'?'asc':'desc';
            return{
                [obj.key]:val
                //例如price:asc
            }
        }
    },
    methods:{
        getData(){
            http.$axios({
                url:'/api/goods/shopList',
                params:{
                    searchName:this.$route.query.key,
                    ...this.orderBy
                }
            }).then(res=>{
                this.goodList = res;
            })
        },
        changTab( index ){
            // console.log(index);
            this.searchList.currentIndex = index;
            //点击的下标对应数据的哪一个
            let item = this.searchList.data[index];
            //取消所有的状态值===0
            this.searchList.data.forEach((v,i)=>{
                if(i != index){
                    v.status = 0; 
                }
            })
            //当前点击的改变状态
            if(index == this.searchList.currentIndex){
                item.status = item.status === 1 ? 2 : 1;
            }
            //发送请求数据排序
            this.getData();
        }
    },
    watch:{
        //监听路由，如果路由发生了改变就再请求一次
        $route(){
            this.getData();
        }
    }
})
</script>
<style scoped>
.search-list{
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.headers ul{
    display: flex;
    justify-content: space-around;
    padding: 1.25rem 0;
}
.headers ul li{
    display: flex;
    align-items: center;
}
.headers ul li > div{
    padding: 0 0.1875rem;
}
.headers ul li .search-fliter{
    display: flex;
    flex-direction: column;
}
section{
    flex: 1;
    overflow: hidden;
}
section ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
section ul li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 50%;
    padding: 0.625rem;
    /* background-color: green; */
}
section ul li h3{
    width: 100%;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #222;
    font-weight: 400;
}
section ul li img{
    width: 10.625rem;
    height: 10.625rem;

}
section ul li img[lazy=loading]{
	background-color: #f7f7f7;
}
section ul li .price{
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0.625rem 0;
}
section ul li .price div:first-child span{
    color: #b0352f;
    font-size: 0.75rem;
}
section ul li .price div:first-child b{
    color: #b0352f;
    font-size: 1rem;
}
section ul li .price div:last-child{
    padding: 0.1875rem 0.375rem;
    color: #fff;
    background-color: #b0352f;
    border-radius: 0.375rem;
}
.active{
    color: rgba(0, 128, 0, 0.878);
    font-weight: 600;
}
</style>
